<template>
<!-- Home里的编辑推荐里的歌单点击进去的页面里的头部 -->
    <div class="song">
        <div class="back" @click="$router.back(-1)"></div>
        <div class="mask" :style="{backgroundImage:'url(' + detail.coverImgUrl + '?imageView=1&type=webp&thumbnail=246x0)'}"></div>
        <div class="left">
            <img :src="detail.coverImgUrl | imageView(246)">
            <span class="listen_time">
                <img src="../assets/images/ear.png">
                {{(detail.playCount/10000).toFixed(1)}}万
            </span>
        </div>
        <div class="right">
            <div class="title">{{detail.name}}</div>
            <div class="author">
                <img :src="detail.creator.avatarUrl | imageView(246)">
                <span>{{detail.creator.nickname}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        detail: Object,
    },
}
</script>

<style lang="less" scoped>
    .song{
        display: flex;
        position: relative;
        overflow: hidden;
        // height: 126px;
        padding: 30px 15px;
        .back{
            height: 20px;
            width: 20px;
            background: url('../assets/images/back.png') center no-repeat;
            background-size: contain;
            color: white;
            position: absolute;
            z-index: 100;
            top: 10px;
            left: 10px;
        }
        .mask {
            width: 100%;
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            background: center no-repeat;
            background-size: cover;
            filter: blur(20px) brightness(0.8);
            transform: scale(1.2);
        }
        .left{
            position: relative;
            img{
                width: 126px;
                vertical-align: center;
            }
            .listen_time{
                img{
                    width: 12px;
                }
                font-size: 13px;
                position: absolute;
                right: 5px;
                top: 5px;
                z-index: 1;
                color: white;
            }
        }
        .right{
            margin-left: 16px;
            .title{
                padding-top: 1px;
                font-size: 17px;
                line-height: 1.3;
                color: #fefefe;
                height: 44px;
                -webkit-box-pack: center;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .author{
                img{
                    width: 30px;
                    border-radius: 50%;
                    vertical-align: middle;

                }
                span{
                    margin-left: 5px;
                    color: #c7c5c4;
                    font-size: 14px;
                }
            }
        }
    }
</style>